import { observer } from "Mobx-react";
import { Slider } from "antd";
import type { optionType } from "../../types";

interface SliderItemType {
  value?: number;
  disabled?: boolean;
  textShow?: boolean;
  option: optionType[];
  onChange?: (val: number) => void;
}

function SliderItem({
  value = 0,
  disabled = false,
  textShow = true,
  option = [
    { content: "", id: 0 },
    { content: "", id: 100 }
  ],
  onChange = () => {}
}: SliderItemType) {
  return (
    <>
      {textShow && (
        <div className="slider-text flex-between">
          <span>{option[0].content}</span>
          <span>{option[1].content}</span>
        </div>
      )}
      <Slider min={option[0].id} max={option[1].id} value={value} disabled={disabled} onChange={(value: number) => onChange(value)} />
    </>
  );
}
export default observer(SliderItem);
